<template>
<h1>EL-日期时间选择器组件</h1>
  <el-date-picker
    v-model="value"
    type="date"
    format="YYYY-MM-DD"
    placeholder="选择日期"
    value-format="YYYY-MM-DD"
    @change="console.log(value)"
  ></el-date-picker>
  <hr>
  <el-date-picker
      v-model="sj"
      type="date"
      format="YYYY-MM-DD HH:mm:ss"
      placeholder="选择时间"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="console.log(sj)"
  ></el-date-picker>
  <hr>
  <el-date-picker
      v-model="times"
      type="datetimerange"
      @change="f"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      start-placeholder="请选择入住时间"
      end-placeholder="请选择离店时间"
      range-separator="至"
  ></el-date-picker>
</template>
<script setup>
import {ref} from "vue";

const value = ref('');
const sj = ref('');
const times = ref([]);
const f = ()=>{
  console.log(times.value);
  console.log(times.value[0]);
  console.log(times.value[1]);
}
</script>


<style scoped>

</style>